<template>
  <div class="content">
    <div class="tixian">
      <div class="header">
        <van-nav-bar @click-left="$router.back()" left-arrow title="充值" fixed></van-nav-bar>
      </div>
      <div class="yue">
        <span>{{ userInfo.agentBalance || 0 }}</span><br />
        <p>账户余额(元)</p>
      </div>
      <div class="main">
        <span>选择充值金额</span>
        <p>咨询电话：0755-2111-0011</p>
        <div class="main-items">
          <div class="main-item" v-for="(item, index) in moneys" :key="index" @click="getMoney(item.text)">
            <img :src="item.image" alt="" />
            <span>{{ item.text }}元</span>
          </div>
        </div>
        <input class="inpus" v-model="money" type="text" placeholder="输入其他金额" />
      </div>
      <div class="contents">
        <span>支付方式</span>
        <div class="wxbtn">
          <van-radio-group v-model="checked" direction="horizontal">
            <van-radio name="1">
              <img src="../../assets/images/wallet/weixin.png" alt="" />
              <span>微信支付</span>
            </van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="tixianshuoming">
        <span>充值须知</span>
        <p>
          用户在确认进行充值前应仔细确认过自己的账号并仔细选择了相关操作选
          项，若因用户自身输入账号错误、 操作不当或不了解充值计费方式等造成
          充错账号、错选充值种类等情形而损害自身权益的， 优联互通将不会作出
          任何补偿或赔偿
        </p>
      </div>
      <div class="btn" @click="qrtx()">确认充值</div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      money: "",
      userInfo: {},
      checked: "1",
      moneys: [
        { image: require("../../assets/images/wallet/jinbi.png"), text: 500 },
        { image: require("../../assets/images/wallet/jinbi.png"), text: 1000 },
        { image: require("../../assets/images/wallet/jinbi.png"), text: 2000 },
      ],
      shows: true,
      password: "",
      tixian: true,
      name: "",
      data: "",
    };
  },
  mounted () {
    this.getUserInfo();
  },
  methods: {
    getUserInfo () {
      this.$store.dispatch("updateUserInfo");

      this.userInfo = this.$store.state.userInfo;
    },
    //解决微信内置对象报错
    weixinPay () {
      var that = this;
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            that.onBridgeReady(),
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", that.onBridgeReady());
          document.attachEvent("onWeixinJSBridgeReady", that.onBridgeReady());
        }
      } else {
        that.onBridgeReady();
      }
    },
    qrtx () {
      if (this.checked == 1) {
        if (this.money == "") {
          this.$toast("请选择或者输入充值金额");
          return;
        } else {
          let obj = {
            description: "充值",
            unitPrice: this.money,
            openid: JSON.parse(sessionStorage.getItem("userWxData")).openid,
            userId: this.$store.state.userInfo.account,
            userType: 2,
            count: 1,
            type: 1,
          };
          this.$api
            .getWxConfig(obj)
            .then((response) => {
              if (response.code == 0) {
                this.data = response.data;
                this.weixinPay();
              } else {
                this.$toast(response.msg);
              }
            })
            .catch((error) => {
              this.$toast("请求失败", +error);
            });
        }
      } else {
        this.$toast("请选择支付方式");
        return;
      }
    },
    //微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据
    onBridgeReady () {
      var that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          debug: true,
          appId: that.data.appId, //公众号名称，由商户传入
          timeStamp: that.data.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: that.data.nonceStr, //随机串
          package: that.data.package,
          signType: that.data.signType, //微信签名方式：
          paySign: that.data.paySign, //微信签名
          jsApiList: ["chooseWXPay"],
        },
        function (res) {
          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            //支付成功后的操作
            that.$toast({
              message: "支付成功",
              duration: 2000,
            });
            that.$router.replace({
              path: "/message?from=" + that.$route.query.from,
              query: {
                msg: 3,
              },
            });
          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
            //取消支付的操作
            that.$toast({
              message: "取消支付",
              duration: 2000,
            });
          } else {
            //支付失败的操作
            that.$toast({
              message: "支付失败",
              duration: 2000,
            });
            that.$router.replace({
              path: "/message",
              query: {
                msg: 4,
              },
            });
          }
        }
      );
    },
    getMoney (val) {
      this.money = val;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .van-nav-bar .van-icon {
  color: #fff;
}
.inpus {
  width: 80%;
  height: 20px;
  padding: 10px;
  margin-left: 32px;
  border: none;
  background: #f5f5f5;
  font-size: 12px;
}
.contents {
  width: 100%;
  height: 90px;
  background: #fff;
  margin-top: -14px;
  line-height: 35px;
  span {
    margin: 10px;
    display: block;
  }
  /deep/.van-radio__label {
    display: flex;
  }
  .wxbtn {
    width: 40%;
    height: 34px;
    border-radius: 10px;
    margin-top: 10px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      margin-left: 6px;
      font-size: 14px;
      // color: #fff;
    }
    img {
      width: 20px;
      height: 20px;
      margin-top: 9px;
    }
  }
}
.tixian {
  width: 100%;
  height: 200px;
  background-image: url('../../assets/images/wallet/tixian.png');
  /deep/ .van-nav-bar {
    background-color: rgba(0, 0, 0, 0);
    .van-nav-bar__content {
      border-bottom: 0.5px solid #e4e4e493;
    }
    .van-nav-bar__title {
      color: #fff !important;
    }
  }
  .yue {
    text-align: center;
    padding-top: 60px;
    color: #fff;
    span {
      font-size: 16px;
    }
    p {
      font-size: 12px;
      margin-top: 8px;
    }
  }
  .main {
    width: 100%;
    margin: 18px auto;
    height: 200px;
    opacity: 1;
    background: #ffffff;
    border-radius: 20px;
    .main-items {
      display: flex;
      padding: 10px;
      .main-item {
        width: 32%;
        height: 60px;
        border: 1px solid gainsboro;
        border-radius: 0.21em;
        margin-left: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 15px;
          height: 15px;
          margin-top: 6px;
          margin-right: 3px;
        }
      }
      .main-item:hover {
        width: 32%;
        height: 60px;
        background-image: url('../../assets/images/wallet/xuanzhongxiaoguo.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 15px;
          height: 15px;
          margin-top: 6px;
          margin-right: 3px;
        }
      }
    }
    span {
      text-align: center;
      padding-top: 5px;
      display: block;
    }
    .codebtn {
      font-size: 12px;
      color: #418ce3;
    }
    p {
      font-size: 12px;
      text-align: center;
      margin-top: 10px;
      color: #bfbfbf;
    }
  }

  .tixianshuoming {
    span {
      display: block;
      padding: 13px;
      margin-top: 5px;
    }
    p {
      padding: 0 10px;
      font-size: 12px;
    }
  }
  .btn {
    width: 80%;
    height: 40px;
    opacity: 1;
    background: linear-gradient(180deg, #7893df, #4b5fe0);
    border-radius: 41px;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    margin: 70px auto;
  }
}
</style>